<template>
  <el-card class="admin-header">
    <a href="/">
      <img src="../../assets/login-background.jpg" alt="" width="55px" style="float: left;margin-top: -5px;">
    </a>
    <span style="font-size: 32px;font-weight: bold;position:absolute;left: 100px">个人中心</span>
    <i class="el-icon-switch-button" v-on:click="logout" style="font-size: 40px;float: right"></i>
  </el-card>
</template>

<script>
import {createRouter} from '../../router'
export default {
  name: 'Header',
  methods: {
    logout () {
      this.$confirm('确定退出当前用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var _this = this
        this.$axios.get('/logout').then(resp => {
          if (resp && resp.data.code === 200) {
            // 前后端状态保持一致
            _this.$store.commit('logout')
            _this.$router.replace('/login')
            // 清空adminMenus
            _this.$store.state.adminMenus = []
            // 清空路由，防止路由重复加载
            const newRouter = createRouter()
            _this.$router.matcher = newRouter.matcher
          }
        })
      }).catch(() => {
        // element-ui消息提示
        this.$message({
          type: 'info',
          message: '取消/登出失败！'
        })
      })
    }
  }
}
</script>

<style scoped>
  .admin-header {
    height: 80px;
    opacity: 0.85;
    line-height: 40px;
    min-width: 600px;
  }
  .el-icon-switch-button {
    cursor: pointer;
    outline:0;
  }
</style>
